<!DOCTYPE html><html lang="zh-CN"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五神鸟文化 - AI交互解读</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
        
        :root {
            --deep-space-blue: #0a1a35;
            --gold: #d4af37;
            --dark-gold: #b08c2c;
            --translucent-black: rgba(0, 0, 0, 0.7);
            --card-bg: rgba(10, 10, 10, 0.9);
        }
        
        body {
            margin: 0;
            padding: 0;
            background-color: var(--deep-space-blue);
            color: white;
            font-family: 'Noto Sans SC', sans-serif;
            overflow-x: hidden;
            min-height: 100vh;
        }
        
        /* 自定义字体 */
        .calligraphy-font {
            font-family: 'FZQKBYSJW', 'Noto Sans SC', sans-serif;
            font-weight: bold;
        }
        
        /* 毛玻璃效果 */
        .frosted-glass {
            background: var(--translucent-black);
            backdrop-filter: blur(10px);
        }
        
        /* 打字机效果容器 */
        .typewriter {
            display: inline-block;
            position: relative;
        }
        
        /* 自定义滚动条 */
        .custom-scrollbar::-webkit-scrollbar {
            width: 4px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background-color: var(--gold);
            border-radius: 2px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-track {
            background: transparent;
        }
        
        /* 用户消息气泡 */
        .user-bubble {
            max-width: 60%;
            align-self: flex-end;
            background: rgba(10, 26, 53, 0.8);
            border-radius: 16px 16px 4px 16px;
            position: relative;
        }
        
        /* AI消息气泡 */
        .ai-bubble {
            max-width: 80%;
            align-self: flex-start;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 16px 16px 16px 4px;
            position: relative;
            border-left: 3px solid var(--gold);
        }
        
        /* 金色微光效果 */
        .gold-glow {
            box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
        }
        
        /* 太极加载动画 */
        @keyframes taiji-rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .taiji-loader {
            width: 24px;
            height: 24px;
            animation: taiji-rotate 1.5s linear infinite;
            opacity: 0.8;
        }
        
        /* 特殊引用样式 */
        .classic-quote {
            background: rgba(255, 255, 255, 0.1);
            color: var(--gold);
            border-radius: 8px;
            padding: 10px;
        }
        
        /* 图表容器 */
        .chart-container {
            background: rgba(20, 36, 68, 0.5);
            border-radius: 8px;
            padding: 10px;
            margin: 15px auto;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="w-full h-[60px] fixed top-0 z-50 frosted-glass">
        <div class="container mx-auto h-full flex items-center justify-between px-8">
            <!-- Logo区域 -->
            <div class="flex items-center">
                <span class="iconify text-2xl mr-2 text-[#d4af37]" data-icon="mdi:bird"></span>
                <span class="text-white text-xl calligraphy-font">五神鸟</span>
            </div>
            
            <!-- 导航菜单 -->
            <nav class="flex space-x-8">
                <a href="首頁.html" class="text-white hover:text-[#d4af37] transition">首页</a>
                <a href="神鳥傳説界面.html" class="text-white hover:text-[#d4af37] transition">神鸟传说</a>
                <a href="科技神韻界面.html" class="text-[#d4af37] border-b-2 border-[#d4af37] pb-1">科技互动</a>
                <a href="文化传承.html" class="text-white hover:text-[#d4af37] transition">文化传承</a>
                <a href="关于我们.html" class="text-white hover:text-[#d4af37] transition">关于我们</a>
            </nav>
            
            <!-- 功能区 -->
            <div class="flex items-center space-x-6">
                <!-- <span class="iconify text-white text-xl cursor-pointer" data-icon="mdi:magnify"></span> -->
                <!-- <button class="text-white text-sm">EN/中文</button> -->
            </div>
        </div>
    </header>

    <!-- 页面头部 -->
    <section class="w-full h-[300px] pt-20 relative">
        <!-- 背景图占位 -->
        <div class="absolute inset-0 bg-gradient-to-br from-[#0a1a35] to-[#1a2a45] opacity-90"></div>
        <div class="absolute inset-0 flex flex-col items-center justify-center">
            <h1 class="text-[72px] calligraphy-font text-[#d4af37] mb-4">智能古籍对话</h1>
            <p class="text-2xl text-white">解密神鸟传说背后的文化密码</p>
        </div>
    </section>

    <!-- 核心交互区 -->
    <main class="container mx-auto mt-10 mb-20">
        <div class="flex w-[1600px] mx-auto justify-center">
            <!-- 左侧用户提问区 -->
            <div class="w-[780px] h-[500px] bg-[#142444] rounded-xl p-6 gold-glow">
                <h2 class="text-2xl calligraphy-font text-[#d4af37] mb-6">向我提问</h2>
                
                <!-- 预设问题按钮组 -->
                <div class="flex space-x-4 mb-8">
                    <button class="w-[240px] h-10 rounded-lg border border-[#d4af37] text-white hover:bg-[#d4af37] hover:text-black transition-all duration-300" data-question="鹪明在五行中代表什么？">鹪明在五行中代表什么？</button>
                    <button class="w-[240px] h-10 rounded-lg border border-[#d4af37] text-white hover:bg-[#d4af37] hover:text-black transition-all duration-300" data-question="幽昌与凤凰有何不同？">幽昌与凤凰有何不同？</button>
                    <button class="w-[240px] h-10 rounded-lg border border-[#d4af37] text-white hover:bg-[#d4af37] hover:text-black transition-all duration-300" data-question="发明神话反映了怎样的天文观？">发明神话反映了怎样的天文观？</button>
                </div>
                
                <!-- 输入区域 -->
                <div class="relative">
                    <textarea id="question-input" class="w-full h-[120px] bg-[#1a2a45] rounded-xl p-5 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#d4af37] focus:ring-opacity-50" placeholder="请输入关于五神鸟的问题..."></textarea>
                    <button id="submit-btn" class="absolute bottom-4 right-4 text-gray-400 hover:text-[#d4af37] transition">
                        <span class="iconify text-2xl" data-icon="mdi:send"></span>
                    </button>
                </div>
            </div>
            
            <!-- 中间间距 -->
            <div class="w-[40px]"></div>
            
            <!-- 右侧AI回答区 -->
            <div class="w-[780px] h-[500px] bg-[#142444] rounded-xl p-6 gold-glow">
                <div class="flex items-center mb-6">
                    <span class="iconify text-[#d4af37] text-3xl mr-3" data-icon="mdi:robot"></span>
                    <h2 class="text-2xl calligraphy-font text-[#d4af37]">AI解读</h2>
                </div>
                
                <!-- 回答显示区域 -->
                <div id="response-area" class="h-[420px] bg-[#0a0a0a] rounded-xl p-4 overflow-y-auto custom-scrollbar">
                    <div class="flex flex-col space-y-4">
                        <!-- 示例对话 -->
                        <div class="flex flex-col space-y-4">
                            <div class="user-bubble px-4 py-3">
                                <p>鹪明在五行中代表什么？</p>
                            </div>
                            
                            <div class="ai-bubble px-4 py-3">
                                <p class="font-bold text-lg mb-2">鹪明是中国传统文化中代表南方和夏季的神鸟，在五行学说中对应火元素。</p>
                                <p class="mb-3">鹪明作为五鸟之一，象征南方七宿（井、鬼、柳、星、张、翼、轸），在五行体系中属火，代表热情、活力和夏季。它与方位、季节、颜色形成完整对应体系：</p>
                                
                                <div class="chart-container">
                                    <div id="wuxing-chart" class="w-[200px] h-[200px] mx-auto"></div>
                                </div>
                                
                                <p class="mb-3">《淮南子·天文训》记载："南方火也，其帝炎帝，其佐朱明，执衡而治夏，其神为荧惑，其兽朱鸟"，明确指出鹪明与南方的关联。</p>
                                
                                <div class="chart-container">
                                    <div id="star-map" class="w-[180px] h-[180px] float-right ml-4"></div>
                                    <p>鹪明在星象上对应于南方七宿组成的鸟形图案，古时常用于天文观测和季节划分。其形象演变融合了现实鸟类特征与星宿排列，形成独特的文化符号体系。</p>
                                </div>
                                
                                <div class="clear-both mt-4">
                                    <div class="chart-container">
                                        <div id="timeline" class="w-full h-[80px]"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 知识库特性展示区 -->
    <section class="w-full mt-16 mb-10">
        <div class="container mx-auto flex justify-between px-10">
            <div class="flex flex-col items-center w-[640px]">
                <span class="iconify text-[#d4af37] text-4xl mb-3" data-icon="mdi:book-open-variant"></span>
                <p class="text-white text-xl">涵盖《山海经》、《淮南子》等上百部典籍</p>
            </div>
            
            <div class="flex flex-col items-center w-[640px]">
                <span class="iconify text-[#d4af37] text-4xl mb-3" data-icon="mdi:graph"></span>
                <p class="text-white text-xl">百万级文化知识图谱关系</p>
            </div>
            
            <div class="flex flex-col items-center w-[640px]">
                <span class="iconify text-[#d4af37] text-4xl mb-3" data-icon="mdi:brain"></span>
                <p class="text-white text-xl">自然语言处理与深度学习驱动</p>
            </div>
        </div>
    </section>

    <!-- ECharts 初始化 -->
    <script>
        // 五行关系图
        const wuxingChart = echarts.init(document.getElementById('wuxing-chart'));
        wuxingChart.setOption({
            tooltip: { show: false },
            series: [{
                type: 'graph',
                layout: 'circular',
                symbolSize: 30,
                label: { show: true, color: '#fff' },
                lineStyle: { width: 2, curveness: 0.3, color: '#d4af37' },
                data: [
                    { name: '木', x: 0, y: 40 },
                    { name: '火', x: 40, y: 0 },
                    { name: '土', x: 0, y: -40 },
                    { name: '金', x: -40, y: 0 },
                    { name: '水', x: 0, y: 0 }
                ],
                links: [
                    { source: '木', target: '火' },
                    { source: '火', target: '土' },
                    { source: '土', target: '金' },
                    { source: '金', target: '水' },
                    { source: '水', target: '木' },
                    { source: '木', target: '土' },
                    { source: '火', target: '金' },
                    { source: '土', target: '水' },
                    { source: '金', target: '木' },
                    { source: '水', target: '火' }
                ],
                emphasis: { focus: 'adjacency' }
            }]
        });
        
        // 星宿位置图
        const starMap = echarts.init(document.getElementById('star-map'));
        starMap.setOption({
            tooltip: { show: false },
            xAxis: { show: false },
            yAxis: { show: false },
            series: [{
                type: 'graph',
                layout: 'none',
                symbolSize: 10,
                label: { show: true, color: '#fff', fontSize: 10 },
                lineStyle: { width: 1, color: '#4a9ff5' },
                data: [
                    { name: '井', x: 30, y: 20 },
                    { name: '鬼', x: 50, y: 30 },
                    { name: '柳', x: 70, y: 40 },
                    { name: '星', x: 90, y: 50 },
                    { name: '张', x: 100, y: 70 },
                    { name: '翼', x: 80, y: 90 },
                    { name: '轸', x: 60, y: 100 },
                    { name: '鹪明', x: 70, y: 60, symbolSize: 20, itemStyle: { color: '#d4af37' } }
                ],
                links: [
                    { source: '井', target: '鬼' },
                    { source: '鬼', target: '柳' },
                    { source: '柳', target: '星' },
                    { source: '星', target: '张' },
                    { source: '张', target: '翼' },
                    { source: '翼', target: '轸' },
                    { source: '轸', target: '井' }
                ]
            }]
        });
        
        // 时间轴
        const timeline = echarts.init(document.getElementById('timeline'));
        timeline.setOption({
            tooltip: { show: false },
            xAxis: {
                type: 'category',
                data: ['商周', '秦汉', '魏晋', '唐宋', '明清'],
                axisLine: { lineStyle: { color: '#d4af37' } },
                axisLabel: { color: '#fff' }
            },
            yAxis: { show: false },
            series: [{
                type: 'scatter',
                symbolSize: 12,
                itemStyle: { color: '#d4af37' },
                data: [10, 20, 15, 25, 20]
            }]
        });
        
        // 处理窗口大小变化
        window.addEventListener('resize', function() {
            wuxingChart.resize();
            starMap.resize();
            timeline.resize();
        });
    </script>
    
    <!-- 交互功能实现 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const questionInput = document.getElementById('question-input');
            const submitBtn = document.getElementById('submit-btn');
            const responseArea = document.getElementById('response-area');
            const presetButtons = document.querySelectorAll('button[data-question]');
            
            // 预设按钮点击事件
            presetButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 按钮动画效果
                    this.style.transform = 'scale(0.95)';
                    setTimeout(() => {
                        this.style.transform = 'scale(1)';
                    }, 200);
                    
                    // 填充问题到输入框
                    questionInput.value = this.getAttribute('data-question');
                    
                    // 模拟提交问题
                    setTimeout(submitQuestion, 300);
                });
            });
            
            // 提交按钮点击事件
            submitBtn.addEventListener('click', submitQuestion);
            
            // 输入框聚焦效果
            questionInput.addEventListener('focus', function() {
                this.style.boxShadow = '0 0 15px rgba(212,175,55,0.6)';
                submitBtn.style.opacity = '1';
                submitBtn.style.color = '#d4af37';
            });
            
            questionInput.addEventListener('blur', function() {
                this.style.boxShadow = '0 0 10px rgba(212,175,55,0.3)';
            });
            
            // 输入框输入时处理
            questionInput.addEventListener('input', function() {
                if (this.value.trim() !== '') {
                    submitBtn.style.color = '#d4af37';
                } else {
                    submitBtn.style.color = '#b0b0b0';
                }
            });
            
            // 提交问题函数
            function submitQuestion() {
                const question = questionInput.value.trim();
                if (!question) return;
                submitBtn.innerHTML = '<div class="taiji-loader"><span class="iconify" data-icon="mdi:yin-yang"></span></div>';
                const userBubble = document.createElement('div');
                userBubble.className = 'user-bubble px-4 py-3';
                userBubble.innerHTML = `<p>${question}</p>`;
                const aiBubble = document.createElement('div');
                aiBubble.className = 'ai-bubble px-4 py-3';
                aiBubble.innerHTML = '<div class="typing-indicator"></div>';
                responseArea.appendChild(userBubble);
                responseArea.appendChild(aiBubble);
                responseArea.scrollTop = responseArea.scrollHeight;
                setTimeout(() => {
                    submitBtn.innerHTML = '<span class="iconify" data-icon="mdi:send"></span>';
                    let fullResponse = '';
                    if (question === '鹪明在五行中代表什么？') {
                        fullResponse = `<p class="font-bold text-lg mb-3">鹪明在五行中代表火元素，对应南方和夏季。</p>
                        <p class="mb-3">鹪明是中国古代神话中的南方神鸟，五行属火，象征热情、活力和光明。它与南方七宿相关联，代表着夏季的繁盛与生命力。</p>
                        <div class="classic-quote mb-3">《淮南子》记载："南方火也，其神为朱鸟。"</div>
                        <p class="mb-3">鹪明的形象常见于古代建筑和艺术中，寓意吉祥与兴旺。</p>`;
                    } else if (question === '幽昌与凤凰有何不同？') {
                        fullResponse = `<p class="font-bold text-lg mb-3">幽昌与凤凰在文化象征和五行属性上有明显不同。</p>
                        <p class="mb-3">幽昌是北方神鸟，五行属水，象征智慧、深沉和冬季。凤凰则是中央神鸟，五行属土，代表大地、和谐与仁德，是百鸟之王。</p>
                        <div class="classic-quote mb-3">《山海经》记载："有鸟焉，其状如鸡，五采而文，名曰凤皇。"</div>
                        <p class="mb-3">幽昌多见于北方神话和民俗，凤凰则在全国范围内被视为祥瑞的最高象征。</p>`;
                    } else if (question === '发明神话反映了怎样的天文观？') {
                        fullResponse = `<p class="font-bold text-lg mb-3">发明神话体现了古人对东方天文和季节变化的理解。</p>
                        <p class="mb-3">发明是东方神鸟，五行属木，象征春天和新生。其神话反映了古代中国人对星宿、季节和自然循环的观察，强调万物生发与希望。</p>
                        <div class="classic-quote mb-3">《人镜经》："东方发明，全身总青。"</div>
                        <p class="mb-3">发明的形象常用于春耕祭祀和文房器物，代表着智慧启迪和生命繁衍。</p>`;
                    } else {
                        fullResponse = `
                        <p class="font-bold text-lg mb-3">${question} 的详细解读如下：</p>
                        <p class="mb-3">中国传统文化中，五神鸟代表着不同的方位和五行元素。鹪明对应南方、火元素，象征夏天和热情；发明对应东方、木元素，象征春天和生命；鹔鹴对应西方、金元素，象征秋天和肃杀；幽昌对应北方、水元素，象征冬天和智慧；凤凰对应中央、土元素，象征大地和平衡。</p>
                        <div class="classic-quote mb-3">《淮南子》记载："天地之罡，分为五行；五行之精，凝为五灵。"</div>
                        <p class="mb-3">这些神鸟不仅是神话中的生物，更是古人观察自然、理解宇宙规律的智慧结晶。它们彼此相生相克，共同构成了中国古代哲学中重要的宇宙观和世界观。</p>
                        <div class="chart-container">
                            <div id="five-god-chart" style="width:300px;height:200px;margin:0 auto"></div>
                        </div>`;
                    }
                    typeResponse(aiBubble, fullResponse);
                }, 1500);
            }
            
            // 打字机效果函数
            function typeResponse(container, text) {
                container.innerHTML = '';
                let index = 0;
                let isOnNode = false;
                let currentNode = '';
                
                function type() {
                    if (index < text.length) {
                        const char = text.charAt(index);
                        
                        // 处理HTML标签
                        if (char === '<') {
                            isOnNode = true;
                        }
                        
                        if (isOnNode) {
                            currentNode += char;
                            if (char === '>') {
                                isOnNode = false;
                                container.innerHTML += currentNode;
                                currentNode = '';
                            }
                        } else {
                            container.innerHTML += char;
                        }
                        
                        index++;
                        
                        // 控制打字速度
                        let delay = 1000 / 15; // 15字/秒
                        
                        // 标点符号停顿
                        if (/[,.?!;:]/.test(char)) {
                            delay += 300;
                        }
                        
                        // 段落停顿
                        if (char === '<' && text.substr(index, 3) === 'p>' && text.charAt(index-2) === '/') {
                            delay += 700;
                        }
                        
                        setTimeout(type, delay);
                        
                        // 滚动到底部
                        responseArea.scrollTop = responseArea.scrollHeight;
                    } else {
                        // 初始化图表
                        setTimeout(() => {
                            const fiveGodChart = echarts.init(document.getElementById('five-god-chart'));
                            fiveGodChart.setOption({
                                tooltip: { show: false },
                                polar: {},
                                angleAxis: { type: 'category', data: ['鹪明', '幽昌', '发明', '鹔鹴', '凤凰'], axisLine: { show: false }, axisLabel: { color: '#fff' } },
                                radiusAxis: { show: false },
                                series: [{
                                    type: 'bar',
                                    coordinateSystem: 'polar',
                                    data: [5, 4, 3, 4, 5],
                                    itemStyle: { color: function(params) { 
                                        return ['#ff6b6b', '#4ecdc4', '#ffe66d', '#f7fff7', '#1a535c'][params.dataIndex];
                                    }},
                                    label: { show: true, position: 'top', color: '#fff' }
                                }]
                            });
                        }, 500);
                    }
                }
                
                type();
            }
        });
    </script>

</body></html>